<template>
  <div
    class="machine-stat full-height bg-white page-content content"
    v-if="isRefresh"
  >
    <!-- tab -->
    <template>
      <div class="margin-t-10">
        <q-tabs
          v-model="tab"
          narrow-indicator
          inline-label
          dense
          align="left"
          indicator-color="primary"
          active-color="primary"
          style="padding: 0"
          class="tab-label"
        >
          <q-tab
            name="stop-stat"
            icon="iconfont icontubiao-121"
            :label="`${statusList[1].label}明细统计`"
          />
          <q-tab
            name="alarm-stat"
            icon="iconfont icontubiao-78"
            :label="`${statusList[4].label}明细统计`"
          />
          <q-tab
            name="time-line"
            icon="iconfont icontubiao-124"
            label="时间线列表"
          />
          <q-tab
            name="availability-stat"
            label="时间开动率"
            icon="iconfont icontubiao2-80"
          />
          <q-tab
            name="circulate-stat"
            icon="iconfont icontubiao-151"
            label="生产计数统计"
            v-if="showCirculate"
          />
          <q-tab
            name="energy-stat"
            icon="iconfont icontubiao5-29"
            label="能耗循环明细"
            v-if="isHasEnergy"
          />
        </q-tabs>
        <q-separator class="full-width" />
      </div>
    </template>
    <!-- tab内容 -->
    <q-tab-panels v-model="tab" animated class="full-height" :keep-alive="true">
      <!-- 停机明细统计 -->
      <q-tab-panel name="stop-stat" class="padding-0">
        <stop-stat ref="stopStat" />
      </q-tab-panel>
      <!-- 报警明细统计 -->
      <q-tab-panel name="alarm-stat" class="padding-0">
        <alarm-stat ref="alarmStat" />
      </q-tab-panel>
      <!-- 时间线列表 -->
      <q-tab-panel name="time-line" class="padding-0">
        <time-line ref="timeLine" />
      </q-tab-panel>
      <!-- 机台开动率 -->
      <q-tab-panel name="availability-stat" class="padding-0">
        <availability-stat ref="availabilityStat" />
      </q-tab-panel>
      <!-- 生产计数统计 -->
      <q-tab-panel  name="circulate-stat" class="padding-0">
        <circulate-stat ref="circulateStat" />
      </q-tab-panel>
      <q-tab-panel v-if="isHasEnergy" name="energy-stat" class="padding-0">
        <energy-stat ref="energyStat" />
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script>
import stopStat from './stop-stat'
import alarmStat from './alarm-stat'
import timeLine from './time-line'
import energyStat from './energy-stat'
import availabilityStat from './availability-stat'
import circulateStat from './circulate-stat'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'machine-stat',
  components: {
    stopStat,
    alarmStat,
    timeLine,
    availabilityStat,
    circulateStat,
    energyStat
  },
  mounted () {
    this.saveCustomerSet()
  },
  computed: {
    ...mapGetters(['statusList', 'userInfo', 'permissions']),
    showCirculate () {
      // 太仓中集不显示生产计数统计
      return this.userInfo.tenant_id !== '51112124626481152'
    },
    isHasEnergy () {
      return this.permissions.includes(this.Enums.SYS_PERMISSION.STATUS_MACHINE_ENERGY_BTN.value) && this.permissions.includes(this.Enums.SYS_PERMISSION.ENERGY_MENU.value)
    }
  },
  methods: {
    ...mapActions(['saveCustomerSet'])
  },
  data () {
    return {
      tab: 'stop-stat', // 选中的 tab
      isRefresh: true
    }
  }
}
</script>

<style scoped lang="stylus">
.padding-0{
  padding 0
}
</style>
